<template>
  <div class="app-intro-small-item">
    <div class="content-box">
      <p class="datetime" v-if="pshow">{{ introSmallItem.comingTitle }}</p>
      <router-link
        tag="div"
        :to="{ name: 'cinemaposter', params: { id: introSmallItem.id } }"
        class="item"
        @click.native="changename(introSmallItem.nm)"
      >
        <div class="img-box">
          <img :src="imgUrl" :alt="introSmallItem.nm">
        </div>
        <div class="film-info">
          <div class="left">
            <div class="title">{{ introSmallItem.nm }}</div>
            <div class="ellipsis" v-if=" introSmallItem.sc != 0 ">
              <span class="suffix">观众评</span>
              <span class="grade">{{ introSmallItem.sc | grade }}</span>
            </div>
            <div class="ellipsis" v-else>
              <span class="grade">{{ introSmallItem.wish }}</span>
              <span class="suffix">人想看</span>
            </div>
            <div class="protagonist" v-if="introSmallItem.star">主演: {{ introSmallItem.star }}</div>
            <!-- <div class="count" v-if="urltype.type === 'movieList'">{{ introSmallItem.showInfo }}</div> -->
            <div class="count">{{ introSmallItem.rt }}上映</div>
          </div>
          <div class="right">
            <span class="fix red" v-if=" introSmallItem.showst === 3">购票</span>
            <span class="fix blue" v-else-if=" introSmallItem.showst === 4 ">预售</span>
            <span class="fix yellow" v-else>想看</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import Bus from "@util/bus";
export default {
  props: ["introSmallItem","pshow"],
  computed: {
    imgUrl () {
      return this.introSmallItem.img.replace(/w.h/, "128.180");
    }
  },
  methods: {
    changename(value) {
      Bus.$emit("changename", value);
    }
  }
};
</script>

<style lang="scss">
.app-intro-small-item {
  height: 3.04rem;
  .content-box {
    height: auto;

    p {
      padding-top: 0.32rem;
      margin: 0;
      font-size: 0.373333rem;
      color: #333;
      height: auto;
    }

    .item {
      display: flex;
      justify-content: space-between;

      .img-box {
        margin-top: 0.32rem;
        width: 1.706667rem;
        height: 2.4rem;
      }

      .film-info {
        display: flex;
        justify-content: space-between;
        padding: 0.32rem 0.373333rem 0.32rem 0.266667rem;

        .left {
          padding-right: 0.133333rem;
          margin-top: 0.133333rem;

          .title {
            height: 0.466667rem;
            margin-bottom: 0.2rem;
            line-height: 0.32rem;
            font-size: 0.45rem;
            font-weight: bold;
          }

          .ellipsis {
            height: 0.6rem;

            .grade {
              margin: 0 0.133333rem;
              font-weight: 700;
              color: #faaf00;
              font-size: 0.4rem;
            }
          }

          .protagonist {
            height: 0.5rem;
            font-size: 0.333333rem;
            color: #666;
            overflow: hidden;
          }

          .count {
            height: 0.5rem;
          }
        }

        .right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 1.333333rem;
          height: 2.4rem;

          .fix {
            width: 1.066667rem;
            height: 0.8rem;
            background-color: #f03d37;
            border-radius: 4px;
            color: #fff;
            line-height: 0.8rem;
            text-align: center;
          }

          .fix.blue {
            background-color: #3c9fe6;
          }

          .fix.yellow {
            background-color: #faaf00;
          }
        }
      }
    }
  }
}
</style>
